<template>
    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
    >
        <el-table-column prop="title" label="文章名"> </el-table-column>
        <el-table-column prop="addTime" label="添加时间"> </el-table-column>
        <el-table-column prop="typeName" label="类别"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
                <el-button
                    @click="updateArt(scope.row.id)"
                    type="text"
                    size="small"
                    >修改</el-button
                >
                <el-button
                    type="text"
                    size="small"
                    @click="delArticle(scope.row.id)"
                    >删除</el-button
                >
            </template>
        </el-table-column>
    </el-table>
</template>

<style>
/* .el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
} */
</style>

<script>
import { getArticleList } from "@/api/article";
import { delArticle } from "@/api/admin";

export default {
    async mounted() {
        this.tableData = await getArticleList();
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return "warning-row";
            } else if (rowIndex === 3) {
                return "success-row";
            }
            return "";
        },
        async delArticle(id) {
            await delArticle(id).then(
                this.$message({
                    message: "删除成功！",
                    type: "success",
                })
            );
            this.tableData = await getArticleList();
        },
        updateArt(id) {
            this.$router.push({ name: "UpdateArt", query: { id } });
        },
    },
    data() {
        return {
            tableData: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
            ],
        };
    },
};
</script>